<template>
  <div class="system-setting-container">
    <h1 class="page-title">⚙️ 系统管理</h1>

    <el-tabs v-model="activeTab" type="border-card">
      <!-- 系统配置 -->
      <el-tab-pane label="系统配置" name="config">
        <el-form :model="configForm" label-width="150px" style="max-width: 800px;">
          <el-divider content-position="left">基本配置</el-divider>
          <el-form-item label="系统名称">
            <el-input v-model="configForm.systemName" placeholder="请输入系统名称"></el-input>
          </el-form-item>
          <el-form-item label="系统Logo">
            <el-upload
              action="#"
              list-type="picture-card"
              :limit="1"
              :auto-upload="false">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="configForm.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input v-model="configForm.email" placeholder="请输入联系邮箱"></el-input>
          </el-form-item>
          <el-form-item label="系统地址">
            <el-input v-model="configForm.address" placeholder="请输入系统地址"></el-input>
          </el-form-item>

          <el-divider content-position="left">业务配置</el-divider>
          <el-form-item label="宠物寄养单价">
            <el-input-number v-model="configForm.fosterPricePerDay" :min="0"></el-input-number>
            <span style="margin-left: 10px">元/天</span>
          </el-form-item>
          <el-form-item label="订单自动取消时间">
            <el-input-number v-model="configForm.orderCancelTime" :min="0"></el-input-number>
            <span style="margin-left: 10px">小时</span>
          </el-form-item>
          <el-form-item label="是否开启注册">
            <el-switch v-model="configForm.registerEnabled"></el-switch>
          </el-form-item>
          <el-form-item label="是否开启评论">
            <el-switch v-model="configForm.commentEnabled"></el-switch>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSaveConfig">保存配置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 操作日志 -->
      <el-tab-pane label="操作日志" name="logs">
        <el-form :inline="true" :model="logSearchForm" style="margin-bottom: 15px;">
          <el-form-item label="操作人">
            <el-input v-model="logSearchForm.operator" placeholder="请输入操作人" clearable></el-input>
          </el-form-item>
          <el-form-item label="操作类型">
            <el-select v-model="logSearchForm.type" placeholder="请选择" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option label="登录" value="login"></el-option>
              <el-option label="新增" value="create"></el-option>
              <el-option label="修改" value="update"></el-option>
              <el-option label="删除" value="delete"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearchLog">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="logList" v-loading="logLoading">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="operator" label="操作人"></el-table-column>
          <el-table-column prop="type" label="操作类型" width="100">
            <template slot-scope="scope">
              <el-tag :type="getLogTypeTag(scope.row.type)">{{ scope.row.typeName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="module" label="操作模块"></el-table-column>
          <el-table-column prop="description" label="操作描述" show-overflow-tooltip></el-table-column>
          <el-table-column prop="ip" label="IP地址" width="140"></el-table-column>
          <el-table-column prop="createTime" label="操作时间" width="160"></el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 数据备份 -->
      <el-tab-pane label="数据备份" name="backup">
        <el-button type="primary" icon="el-icon-download" @click="handleBackup" style="margin-bottom: 15px;">
          立即备份
        </el-button>

        <el-table :data="backupList">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="fileName" label="备份文件名"></el-table-column>
          <el-table-column prop="fileSize" label="文件大小"></el-table-column>
          <el-table-column prop="createTime" label="备份时间" width="160"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleDownloadBackup(scope.row)">
                下载
              </el-button>
              <el-button size="mini" type="danger" @click="handleDeleteBackup(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 系统监控 -->
      <el-tab-pane label="系统监控" name="monitor">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card>
              <div slot="header">服务器信息</div>
              <el-descriptions :column="1">
                <el-descriptions-item label="操作系统">{{ monitorInfo.os }}</el-descriptions-item>
                <el-descriptions-item label="CPU核心">{{ monitorInfo.cpuCores }}核</el-descriptions-item>
                <el-descriptions-item label="内存">{{ monitorInfo.memory }}GB</el-descriptions-item>
                <el-descriptions-item label="磁盘空间">{{ monitorInfo.disk }}GB</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header">运行状态</div>
              <el-descriptions :column="1">
                <el-descriptions-item label="CPU使用率">
                  <el-progress :percentage="monitorInfo.cpuUsage" :color="getProgressColor(monitorInfo.cpuUsage)"></el-progress>
                </el-descriptions-item>
                <el-descriptions-item label="内存使用率">
                  <el-progress :percentage="monitorInfo.memoryUsage" :color="getProgressColor(monitorInfo.memoryUsage)"></el-progress>
                </el-descriptions-item>
                <el-descriptions-item label="磁盘使用率">
                  <el-progress :percentage="monitorInfo.diskUsage" :color="getProgressColor(monitorInfo.diskUsage)"></el-progress>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header">在线信息</div>
              <el-descriptions :column="1">
                <el-descriptions-item label="在线用户">{{ monitorInfo.onlineUsers }}人</el-descriptions-item>
                <el-descriptions-item label="今日访问">{{ monitorInfo.todayVisits }}次</el-descriptions-item>
                <el-descriptions-item label="系统运行时间">{{ monitorInfo.uptime }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'SystemSetting',
  data () {
    return {
      activeTab: 'config',
      configForm: {
        systemName: '宠物管理系统',
        phone: '400-123-4567',
        email: 'service@petmanage.com',
        address: '北京市朝阳区xxx大厦',
        fosterPricePerDay: 100,
        orderCancelTime: 24,
        registerEnabled: true,
        commentEnabled: true
      },
      logSearchForm: {
        operator: '',
        type: ''
      },
      logList: [],
      logLoading: false,
      backupList: [],
      monitorInfo: {
        os: 'CentOS 7.9',
        cpuCores: 8,
        memory: 16,
        disk: 500,
        cpuUsage: 35,
        memoryUsage: 62,
        diskUsage: 45,
        onlineUsers: 28,
        todayVisits: 1250,
        uptime: '15天 8小时'
      }
    }
  },
  created () {
    this.loadConfig()
    this.loadLogs()
    this.loadBackupList()
  },
  methods: {
    loadConfig () {
      // 将来对接接口 GET /api/admin/config
      console.log('加载系统配置')
    },
    handleSaveConfig () {
      // 将来对接接口 PUT /api/admin/config
      this.$message.success('配置保存成功')
    },
    loadLogs () {
      // 将来对接接口 GET /api/admin/logs
      this.logList = [
        { id: 1, operator: '管理员', type: 'login', typeName: '登录', module: '系统', description: '管理员登录系统', ip: '192.168.1.100', createTime: '2024-01-25 14:30' },
        { id: 2, operator: '张三', type: 'create', typeName: '新增', module: '宠物管理', description: '新增宠物：柯基犬', ip: '192.168.1.101', createTime: '2024-01-25 14:00' }
      ]
    },
    handleSearchLog () {
      this.loadLogs()
    },
    getLogTypeTag (type) {
      const typeMap = {
        'login': 'success',
        'create': 'primary',
        'update': 'warning',
        'delete': 'danger'
      }
      return typeMap[type] || 'info'
    },
    handleBackup () {
      // 将来对接接口 GET /api/admin/backup
      this.$message.success('备份任务已启动')
    },
    loadBackupList () {
      this.backupList = [
        { id: 1, fileName: 'backup_20240125_143000.sql', fileSize: '25.6MB', createTime: '2024-01-25 14:30' },
        { id: 2, fileName: 'backup_20240124_140000.sql', fileSize: '24.8MB', createTime: '2024-01-24 14:00' }
      ]
    },
    handleDownloadBackup (row) {
      this.$message.info(`下载备份：${row.fileName}`)
    },
    handleDeleteBackup (row) {
      this.$confirm(`确认删除备份 "${row.fileName}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.loadBackupList()
      })
    },
    getProgressColor (percentage) {
      if (percentage < 50) {
        return '#67C23A'
      } else if (percentage < 80) {
        return '#E6A23C'
      } else {
        return '#F56C6C'
      }
    }
  }
}
</script>

<style scoped>
.system-setting-container {
  padding: 20px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #333;
}
</style>
